<!DOCTYPE html>  
<html>
<meta charset="utf-8" />  
<title>BFC</title>  
<style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 300px;
    }
    .aside {
        height: 150px;
        float: left;
        background: black;
    }
    .main {
        height:200px;
        background-color:red;
        overflow: hidden;
    }



    .child {
        border:1px solid red;
        width:100px;
        height:100px;
        float:left;
    }
    .parent {
        border:1px solid black;
        width:300px;
        overflow: hidden;
    }



    .box {
        width: 200px;
    }
    aside {
        background-color: yellow;
        float: left;
        width: 100px;
        height: 50px;
    }
    main {
        background-color: pink;
        overflow: hidden;
    }
</style>
<body>
    <!-- BFC布局规则： -->
    <!-- 
        内部的Box会在垂直方向，一个接一个地放置。

        Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
        
        每个元素的左外边缘（margin-left)， 与包含块的左边（contain box left）相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。除非这个元素自己形成了一个新的BFC。
        
        BFC的区域不会与float box重叠。
        
        BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
        
        计算BFC的高度时，浮动元素也参与计算 
    -->

    <!-- 如何形成一个BFC -->
    <!-- 
        根元素或其它包含它的元素

        浮动 (元素的 float 不是 none)

        绝对定位的元素 (元素具有 position 为 absolute 或 fixed)

        非块级元素具有 display: inline-block，table-cell, table-caption, flex, inline-flex

        块级元素具有overflow ，且值不是 visible
     -->
    <div class="aside"></div>
    <div class="main"></div>


    <br/><br/><br/>
    
    <!-- 清除浮动  -->
    <div class='parent'>
        <div class='child'></div>
    </div>


    <br/><br/><br/>

    <!-- 两端自适应 -->
    <div class='box'>
        <aside></aside>
        <main>我是好多好多文字会换行的那种蛤蛤蛤蛤蛤蛤蛤蛤蛤蛤蛤蛤蛤</main>
    </div>
</body>
</html>